<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css3加载动画效果</title>
  <script type="text/javascript" src="/j-tool/jquery.js"></script>
 </head>
 <style>
	.circle {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-right:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:50px;
	height:50px;
	margin:0 auto;
	-moz-animation:spinPulse 1s infinite ease-in-out;
	-webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-left:5px solid rgba(0,0,0,0);
	border-right:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7; 
	width:30px;
	height:30px;
	margin:0 auto;
	position:relative;
	top:-50px;
	-moz-animation:spinoffPulse 1s infinite linear;
	-webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
#loading{position:fixed;top:0px;background-color:#CCCCCC;}
li {font-size:12px;margin:5px 20px;}
 </style>
<body>
	<div id="loading">
		<div class="circle"></div>
		<div class="circle1"></div>
	</div>
	<div>
	<ul>
		<li>效果：图片在为完成加载的时候，会出现加载动画。</li>
		<li>在第一次完成后会有缓存，所以必须 Ctrl+F5 刷新页面清除缓存</li>
	</ul>
	</div>
	<div><img src="/pic/xpic7658.jpg"/><img src="/pic/xpic7624.jpg"/></div>
</body>
<script>
	$('#loading').css({width:$(window).width(),height:$(window).height()});
	
	$(window).load(function(){
            loadCheck();
    });

	function loadCheck()
	{
		if(document.readyState == 'loaded' || document.readyState == 'complete') 
		{
			$('#loading').detach();//加载完成之后进行处理，可扩展到其他用途。
		}
	}
</script>
</html>